<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <style>
        * { margin: 0; padding: 0; }
        ul { list-style: none; }
        body {
            padding-top: 100px;
        }
        .container {
            position: relative;
            width: 900px;
            height: 500px;
            margin: 0 auto;
        }
        .container:hover .next,
        .container:hover .pre {
            display: block;
        }
        .container .item {
            opacity: 0;
            transition: opacity 1s;
            position: absolute;
            top: 0;
        }
        .container .item.active {
            opacity: 1;
        }
        .circles-con {
            position: absolute;
            right: 50%;
            bottom: 10px;
            transform: translateX(50%);
        }
        .circle {
            float: left;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #fff;
            margin: 0 4px;
        }
        .circle.on {
            background-color: orange;
        }
        .next,
        .pre {
            position: absolute;
            width: 54px;
            height: 79px;
            top: 50%;
            display: none;
            transform: translate(0, -50%);
        }
        .next {
            right: 20px;
            background: url("./images/next.png");
        }
        .pre {
            left: 20px;
            background: url("./images/pre.png");
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item active"><img src="./images/3.jpg" alt="" width="900px"/></div>
        <div class="item"><img src="./images/2.jpg" alt="" width="900px"/></div>
        <div class="item"><img src="./images/3.jpg" alt="" width="900px"/></div>
        <div class="item"><img src="./images/4.jpg" alt="" width="900px"/></div>

        <ul class="circles-con">
            <li class="circle on"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
        </ul>

        <div class="next"></div>
        <div class="pre"></div>
    </div>
    <script>
        let timerId = null;
        let index = 0;
        let items = document.querySelectorAll(".item");
        let circles = document.querySelectorAll(".circle");
        function removes(){
            items[index].classList.remove("active");
            circles[index].classList.remove("on");
        }
        function adds(){
            items[index].classList.add("active");
            circles[index].classList.add("on");
        }
        function autoPlay() {
             timerId = setInterval(function () {
                 removes()
                 index++;
                 if (index === 4) {
                     index = 0;
                    }
                    adds()
                }, 1000);
            }
        autoPlay();
        function stopAndOn() {
            let container = document.querySelector(".container");
            container.onmouseenter = () => {
                clearInterval(timerId);
                timerId = null;
            };
            container.onmouseleave = () => autoPlay();
        }
        stopAndOn();
        function preAndNext() {
            let next = document.querySelector(".next");
            let pre = document.querySelector(".pre");

            pre.onclick = () => {
                removes()
                index--
                if(index === -1){
                    index = 3
                }
                adds()
            };
            next.onclick = () => {
                removes()
                index++
                if(index === 4){
                    index = 0
                }
                adds()
            };
        }
        preAndNext()
        function cirClick(){
            circles.forEach((circle,j)=>{
                circle.onclick=()=>{
                    removes()
    
                    items[j].classList.add("active");
                    circle.classList.add("on");
                    index=j
                }        
            })
        }
        cirClick()
    </script>
</body>

</html>